<script lang="ts" setup>
import type { Consultation01ComponentMeta } from '@/definitions/type'
import CompStyle from '@/components/CompAttr/CompStyle.vue'
import { useCompStyle } from '@/hooks/useCompStyle'
import { useUpload } from '@/hooks/useUpload'
import { withPublicPath } from '@/utils/publicPath'
import { Input, RadioButton, RadioGroup, Space, Textarea } from 'ant-design-vue'

defineOptions({
  name: 'Consultation01Attr',
  inheritAttrs: true,
})
const { activeRender } = useCompStyle<Consultation01ComponentMeta>()

const uploadOpts: Parameters<typeof useUpload>['0'] = {
  successHandler({ url }) {
    activeRender.value!.config.avatar = url
  },
}
const { uploadAction: uploadImage } = useUpload(uploadOpts)
</script>

<template>
  <div v-if="activeRender">
    <div class="mb-6">
      <div class="field-title">
        组件模板
      </div>
      <RadioGroup button-style="solid" :value="activeRender.config.template">
        <RadioButton v-for="item of activeRender.config.templateOptions" :key="item.value" :value="item.value">
          {{ item.label }}
        </RadioButton>
      </RadioGroup>
    </div>
    <div class="field-title">
      组件内容
    </div>
    <Space :size="20" direction="vertical" style="width: 100%;">
      <div class="field-control">
        <div class="field-label">
          咨询头像
        </div>
        <div class="flex flex-row items-end space-x-2">
          <div class=" w-80px h-80px border border-solid border-[var(--app-color-border)] rounded" @click="uploadImage">
            <div v-if="activeRender.config.avatar" class="relative group w-full h-full">
              <span
                class="hidden group-hover:flex justify-center items-center absolute top-0 w-full h-full cursor-pointer bg-[rgba(0,0,0,0.5)] text-white"
              >重新上传</span>
              <img :src="activeRender.config.avatar" :width="80" :height="80" class="w-full h-full object-cover">
            </div>
            <div v-else class="w-full h-full flex justify-center items-center">
              <img :src="withPublicPath('/images/upload-placeholder.png')" :width="32" :height="32" class="w-32px h-32px">
            </div>
          </div>
          <div class="text-second-app text-xs">
            建议图片比例1:1
          </div>
        </div>
      </div>
      <div class="field-control">
        <div class="field-label">
          咨询姓名
        </div>
        <Input
          v-model:value="activeRender.config.nickName" placeholder="请输入姓名"
          :min-length="activeRender.config.nickNameRules?.min" :max-length="activeRender.config.nickNameRules?.max"
          :required="activeRender.config.nickNameRules?.required"
        />
      </div>
      <div class="field-control">
        <div class="field-label">
          咨询身份
        </div>
        <Input
          v-model:value="activeRender.config.course" placeholder="请输入身份"
          :min-length="activeRender.config.courseRules?.min" :max-length="activeRender.config.courseRules?.max"
          :required="activeRender.config.courseRules?.required"
        />
      </div>
      <div class="field-control">
        <div class="field-label">
          引导话术
        </div>
        <Textarea
          v-model:value="activeRender.config.guide" placeholder="请输入引导话术" :rows="4"
          :min-length="activeRender.config.guideRules?.min"
          :max-length="activeRender.config.guideRules?.max"
          :required="activeRender.config.guideRules?.required"
        />
      </div>
      <div class="field-control">
        <div class="field-label">
          按钮文案
        </div>
        <div class="relative">
          <Input
            v-model:value="activeRender.config.buttonText" placeholder="请输入按钮文案"
            :min-length="activeRender.config.buttonTextRules?.min"
            :max-length="activeRender.config.buttonTextRules?.max"
            :required="activeRender.config.buttonTextRules?.required"
          />
        </div>
      </div>
    </Space>
    <CompStyle />
  </div>
</template>

<style lang="less" scoped>
.field-title {
  color: var(--app-text-color-main);
  @apply font-bold text-sm mb-14px;
}

.field-control,
.field-control-row {
  color: var(--app-text-color-main);
  @apply flex gap-2;

  .field-label {
    color: var(--app-text-color-second);
    @apply text-sm;
  }
}

.field-control {
  @apply flex-col;
}

.field-control-row {
  @apply flex-row;
}
</style>
